<template>
  <div>
    <el-tabs v-model="current" tab-position="left">
<!--        <el-tag-->
<!--            :type="item.type"-->
<!--            closable-->
<!--            @close="onclose(index)"-->
<!--            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 25px; margin-right: 25px;"-->
<!--            v-for="(item, index) in tag"-->
<!--            :key="index"-->
<!--        >-->
<!--          {{ item.text }}-->
<!--        </el-tag>-->
        <el-form ref="memberRegisterForm" :model="memberRegisterForm" :rules="memberRegisterRule"
                 style="width: 80%; min-width: 800px"
                 label-width="140px">
          <el-form-item label="短信验证状态" prop="smsStatus">
            <el-switch
                v-model="memberRegisterForm.paramMap.smsStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                active-text="开启"
                inactive-text="关闭"
            ></el-switch>
          </el-form-item>
          <el-form-item label="验证短信配置" prop="paramMap.smsConfigId" v-if="memberRegisterForm.paramMap.smsStatus == 1">
            <el-select f v-model="memberRegisterForm.paramMap.smsConfigId" placeholder="请选择短信配置">
              <el-option
                  v-for="item in smsConfigList"
                  :key="item.id"
                  :label="item.platformName   + ' ' + item.smsCode  "
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱验证状态" prop="emailStatus">
            <el-switch
                v-model="memberRegisterForm.paramMap.emailStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                active-text="开启"
                inactive-text="关闭"
            ></el-switch>
          </el-form-item>
          <el-form-item label="邮箱验证配置" prop="paramMap.emailConfigId"  v-if="memberRegisterForm.paramMap.emailStatus == 1">
            <el-select f v-model="memberRegisterForm.paramMap.emailConfigId" placeholder="请选择邮件配置">
              <el-option
                  v-for="item in emailConfigList"
                  :key="item.id"
                  :label="item.nickName"
                  :value="item.id">
              </el-option>
            </el-select>
            <el-button @click="showCodeConfig" style="margin-left: 10px" type="text">
              验证码模板配置
            </el-button>
          </el-form-item>
          <el-form-item label="会员注册激活" prop="activateStatus">
            <el-switch
                v-model="memberRegisterForm.paramMap.activateStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                active-text="开启"
                inactive-text="关闭"
            ></el-switch>
          </el-form-item>
          <el-form-item label="会员修改手机号" prop="changePhoneStatus">
            <el-switch
                v-model="memberRegisterForm.paramMap.changePhoneStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                active-text="开启"
                inactive-text="关闭"
            ></el-switch>
          </el-form-item>
          <el-form-item label="会员修改邮箱" prop="changeEmailStatus">
            <el-switch
                v-model="memberRegisterForm.paramMap.changeEmailStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                active-text="开启"
                inactive-text="关闭"
            ></el-switch>
          </el-form-item>
        </el-form>


    </el-tabs>
    <el-button type="primary" @click="onSubmit">保存</el-button>
<!--    <el-dialog title="验证码模板配置" :visible.sync="codeConfigVisible" :close-on-click-modal="false">-->
<!--      <el-table-->
<!--          ref="multipleTable"-->
<!--          :data="memberList"-->
<!--          style="width: 100%; margin-bottom: 20px"-->
<!--          row-key="id"-->
<!--          border-->
<!--      >-->
<!--        <el-table-column-->
<!--            prop="username"-->
<!--            label="用户名"-->
<!--            :show-overflow-tooltip="true"-->
<!--        >-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="phone"-->
<!--            label="手机号"-->
<!--            :show-overflow-tooltip="true"-->
<!--        >-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="email"-->
<!--            label="邮箱"-->
<!--            :show-overflow-tooltip="true"-->
<!--        >-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </el-dialog>-->
    <mail-captcha-config v-if="codeConfigVisible" ref="formInfo"></mail-captcha-config>
  </div>

</template>

<script>
import request from "@/common/request"

import MailCaptchaConfig from "../../message/mail/castleconfigmailcaptcha";

export default {
  data() {
    return {
      codeConfigVisible : false,
      current: "0",
      formData: {},
      memberRegisterForm: {
        bindCode: "MEMBER_REGISTER",
        bindDetail: "",
        groupCode: "",
        id: "",
        paramMap: {
          smsStatus: "",
          emailStatus: "",
          smsConfigId: "",
          emailConfigId: "",
          activateStatus: "",
          changeEmailStatus: "",
          changePhoneStatus: ""
        }
      },
      memberRegisterRule: {
        "paramMap.smsConfigId": [{required: true, message: "请选择验证短信配置", trigger: "blur"}],
        "paramMap.emailConfigId": [{required: true, message: "请选择验证邮箱配置", trigger: "blur"}],
      },
      smsConfigList:[],
      emailConfigList:[],
    }
  },
  components: {
    "mail-captcha-config": MailCaptchaConfig,
  },
  created() {
    this.getData()
    this.getConfigList()
  },
  methods: {
    showCodeConfig(){
      this.codeConfigVisible = true
      this.$nextTick(() => {
        this.$refs.formInfo.init();
      });
    },
    async getConfigList(){
      const smsRes = await request("get", "/message/sms/configSms/list")
      const emailRes = await request("get", "/message/mail/castleConfigMail/list")
      this.smsConfigList = smsRes.data
      this.emailConfigList = emailRes.data
    },
    async getData() {
      const {data} = await request("get", "/system/configApi/list")
      const memberRegister = data.find(item => item.bindCode === "MEMBER_REGISTER")
      if (memberRegister) {
        this.memberRegisterForm = {
          bindCode: "MEMBER_REGISTER",
          bindDetail: memberRegister.bindDetail,
          groupCode: memberRegister.groupCode,
          id: memberRegister.id,
          paramMap: {
            smsStatus: memberRegister.paramMap.smsStatus,
            emailStatus: memberRegister.paramMap.emailStatus,
            smsConfigId: memberRegister.paramMap.smsConfigId,
            emailConfigId: memberRegister.paramMap.emailConfigId,
            activateStatus: memberRegister.paramMap.activateStatus,
            changeEmailStatus: memberRegister.paramMap.changeEmailStatus,
            changePhoneStatus: memberRegister.paramMap.changePhoneStatus
          }
        }
      }
    },
    async onSubmit() {
      const refs = [this.$refs.memberRegisterForm]
      const formData = [this.memberRegisterForm][this.current]
      refs[this.current].validate(async valid => {
        if (valid) {
          formData.bindDetail = JSON.stringify(formData.paramMap)
          const {code, msg} = await request("post", "/system/configApi/edit", formData)
          if (code === 0) {
            this.$message.success("保存成功")
          } else {
            this.$message.error(msg)
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped></style>
